<!doctype html> <html> <head> <script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script> <style> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="container"></div> <script type="text/javascript"> anychart.onDocumentReady(function () { var stage = anychart.graphics.create('container'); var gauge = anychart.circularGauge(); gauge.container(stage); gauge.title(null) .fill(null) .stroke(null); gauge.title().fontWeight('normal') .fontFamily('Verdana') .fontColor('#474747') .fontSize('14px'); gauge.axis().labels().fontWeight('normal') .fontFamily('Verdana') .fontColor('#474747') .fontSize('14px'); gauge.data([63]); gauge.axis().scale() .minimum(0) .maximum(100) .ticks({interval: 10}) .minorTicks({interval: 5}); gauge.axis() .startAngle(270) .fill('#929292') .width(1) .sweepAngle(270) .ticks({type: 'trapezium', fill: '#474747', length: 10}) .minorTicks({type: 'trapezium', fill: '#474747', length: 4}); gauge.range(0, { from: 55, to: 70, position: 'i', fill: '#D96B2B', stroke: '1 #000', startSize: 4, endSize: 4, radius: 108 }); gauge.range(1, { from: 70, to: 100, position: 'i', fill: '#731728', stroke: '1 #000', startSize: 4, endSize: 4, radius: 108 }); gauge.needle() .fill('#929292') .stroke('1px rgba(2,2,2,.2)') .startRadius('0%') .endRadius('90%') .middleRadius(0) .startWidth('0.1%') .endWidth('0.1%') .middleWidth('5%'); gauge.cap() .radius('10%') .fill('#474747'); internalGauge = anychart.circularGauge(); internalGauge.container(stage); internalGauge .data([81]) .bounds('20%', '60%', '25%', '35%') .fill('none') .stroke('none'); internalGauge.axis() .scale() .minimum(0) .maximum(100) .ticks().interval(10); internalGauge.axis().labels().fontWeight('normal') .fontFamily('Verdana') .fontColor('#474747') .fontSize('10px'); internalGauge.axis() .startAngle(180) .fill('#474747') .zIndex(0) .labels(); internalGauge.axis().ticks({type: 'trapezium', fill: '#474747', length: 15}); internalGauge.needle() .fill('#929292') .stroke('1px rgba(2,2,2,.2)') .startRadius('0%') .endRadius('90%') .middleRadius(0) .startWidth('0.1%') .endWidth('0.1%') .middleWidth('5%'); internalGauge.cap() .radius('10%') .fill('#474747'); internalGauge.range(0, { from: 75, to: 95, position: 'i', fill: '#D96B2B', stroke: '1 #000', startSize: 6, endSize: 6, radius: 113, zIndex: 1 }); internalGauge.range(1, { from: 95, to: 100, position: 'i', fill: '#731728', stroke: '1 #000', startSize: 6, endSize: 6, radius: 113, zIndex: 1 }); gauge.draw(); internalGauge.draw() }); </script> </body> </html>